<style lang="less" scoped>
  @import "site-info.css";
</style>
<template>
  <Card class="site-info-container">
    <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="140">
      <FormItem label="站点名" prop="name">
        <Input v-model="formItem.name" :maxlength="5" :disabled="!edit" style="width:260px"
               placeholder="请输入站点名"></Input>
      </FormItem>
      <FormItem label="服务号APPID" prop="gzh_appid">
        <Input v-model="formItem.gzh_appid" :disabled="!edit" style="width:260px" placeholder="服务号APPID"></Input>
      </FormItem>
	    <FormItem label="服务号密钥" prop="gzh_secret">
		    <Input v-model="formItem.gzh_secret" :disabled="!edit" style="width:260px" placeholder="服务号密钥"></Input>
	    </FormItem>
      <FormItem label="小程序APPID" prop="xcx_appid">
        <Input v-model="formItem.xcx_appid" :disabled="!edit" style="width:260px" placeholder="小程序APPID"></Input>
      </FormItem>
      <FormItem label="过期日期">
        <DatePicker :disabled="!admin||!edit" v-model="formItem.expiration_time"
                    format="yyyy-MM-dd" placeholder="选择日期" style="width:260px"></DatePicker>
      </FormItem>
      <FormItem label="自定义域名" prop="domain">
        <Input v-model="formItem.domain" :disabled="!edit" type="text" style="width:300px" placeholder="自定义域名"></Input>
      </FormItem>
      <FormItem label="微信支付商户号" prop="wx_payment_merchant_id">
        <Input v-model="formItem.wx_payment_merchant_id" :disabled="!edit" type="text" style="width:300px" placeholder="微信支付商户号"></Input>
      </FormItem>
      <FormItem label="微信支付密钥" prop="wx_payment_key">
        <Input v-model="formItem.wx_payment_key" :disabled="!edit" type="text" style="width:300px" placeholder="微信支付密钥"></Input>
      </FormItem>
      <FormItem label="微信支付证书" prop="wx_payment_cert_path">
	      <Input v-model="formItem.wx_payment_cert_path" readonly :disabled="!edit" type="text" style="width:300px" placeholder="证书"></Input>
	      <Upload
		      v-if="edit"
		      :on-success="handleCertPemSuccess"
		      :headers="headers"
		      action="/api/admin/Site/uploadCert">
		      <Button icon="ios-cloud-upload-outline">点击上传</Button>
	      </Upload>
      </FormItem>
	    <FormItem label="微信支付密钥证书" prop="wx_payment_cert_path">
		    <Input v-model="formItem.wx_payment_key_path" readonly :disabled="!edit" type="text" style="width:300px" placeholder="证书"></Input>
		    <Upload
			    v-if="edit"
			    :on-success="handleCertKeySuccess"
			    :headers="headers"
			    action="/api/admin/Site/uploadCert">
			    <Button icon="ios-cloud-upload-outline">点击上传</Button>
		    </Upload>
	    </FormItem>
    </Form>
    <QAuth class="auth" :access="'admin/Site/save'">
      <Button slot="content" v-if="!edit" @click="toEdit">编辑</Button>
    </QAuth>

    <div class="site-info-btn-wrap" v-if="edit">
      <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
      <Button type="primary" @click="submit" :loading="loading">保存</Button>
    </div>
  </Card>


</template>
<script>
  import {checkDomain,getToken}  from '@/libs/util'
  import {get, save, adminSave,getByAdmin} from '@/api/site'
  import SelectImg from '../../components/select-img'
  import QAuth from '../../components/auth.vue'
  export default{
    name: 'site-info',
    components: {
      SelectImg,
      QAuth
    },
    data(){
      return {
        headers:null,
        admin: false,
        edit: false,
        loading: false,
        formItem: {
          id: null,
          name: '',
          gzh_appid: '',
          gzh_secret: '',
          xcz_appid: '',
          wx_payment_merchant_id: null,
          wx_payment_key: null,
          wx_payment_cert_path: null,
          wx_payment_key_path: null,
          expiration_time: '',
          domain: ''
        },
        ruleValidate: {
          name: [
            {required: true, max: 10, message: '站点名长度为5个字以内', trigger: 'blur'}
          ],
          gzh_appid: [
            {required: true, len: 18, message: '请输入正确的公众号appid', trigger: 'blur'}
          ],
          gzh_secret: [
            {required: true, message: '请输入公众号操作密钥', trigger: 'blur'}
          ],
          xcx_appid: [
            {required: true, len: 18, message: '请输入正确的小程序appid', trigger: 'blur'}
          ],
          // expiration_time: [
          //   {required: false, type: 'date', message: '请输入正确的日期', trigger: 'blur'}
          // ],
          domain: [
            {required: false, message: '域名不正确', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!checkDomain(value)) {
                  callback('域名不正确');
                } else {
                  callback();
                }
              }
            }
          ]
        }
      };
    },
    created(){
      this.headers = {'apiAuth': getToken()};
      this.init();
    },
    // watch: {
    //   // 监听相同路由下参数变化的时候，从而实现异步刷新
    //   '$route' (to, from) {
    //     // 重置数据
    //     Object.assign(this.$data, this.$options.data());
    //     /** 初始化其他数据 */
    //     this.init();
    //   }
    // },
    methods: {
      init(){
        this.admin = false;
        this.formItem.id = null;
        this.edit = false;
        let admin = this.$route.params.admin;
        if (admin !== undefined && admin == 1) {
          this.admin = true;
          this.toEdit();
          let tid = this.$route.params.tid;
          if (tid !== undefined) {
            this.formItem.id = tid;
            this.getData();
          }
        } else {
          this.getData();
        }
      },
      cancel(){
        this.edit = false;
      },
      toEdit(){
        this.edit = true;
      },
      handleCertPemSuccess (res, file) {
	      this.formItem.wx_payment_cert_path=res.data.filePath;
      },
      handleCertKeySuccess (res, file) {
	      this.formItem.wx_payment_key_path=res.data.filePath;
      },
      getData(){
        if(this.admin){
          getByAdmin(this.formItem.id).then(rep => {
            this.formItem = rep.data.data;
          })
        }else {
          get().then(rep => {
            this.formItem = rep.data.data;
          })
        }
      },
      save(){
        let vm = this;
        vm.formItem.expiration_time= vm.GLOBAL.convertUTCTimeToLocalTime(vm.formItem.expiration_time);
        if (this.admin) {
          adminSave(vm.formItem).then(rep => {
            vm.$Message.success('保存成功');
            vm.cancel();
            vm.loading = false;
            this.$store.dispatch('siteUpdateList', true);
          })
        } else {
          save(this.formItem).then(rep => {
            vm.$Message.success('保存成功');
            vm.cancel();
            vm.loading = false
          })
        }
      },
      submit(){
        let vm = this;
        this.$refs['myForm'].validate((valid) => {
          if (valid) {
            vm.loading = true
            vm.save();
          }
        })
      },
    }
  }
</script>
